<template>
    <div class="wrap" style="border: 1px solid #ccc;">
        <div>
            父组件数字：{{ num }}
        </div>
        <div>
            子组件数字：{{ numSon }}
        </div>
        <button @click="onClick">子组件按钮</button>
        <slot :text="numSon" :count="1"></slot>
        {{ $attrs }}
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useAttrs } from 'vue'

const attrs = useAttrs()
console.log(attrs, '父组件透传的内容attrs')
defineProps({
    num: {
        type: Number
    }
})
const numSon = ref(1);
const params = reactive({
    name: '我是子组件数据',
    age: 18
});
const emit = defineEmits(["doNumAdd"]);
console.log(emit, "这是emit");
const onClick = () => {
    numSon.value++;
    emit("doNumAdd", params);
    attrs.onShow()
};

defineExpose({
    numSon
})  
</script>

<style lang="scss" scoped></style>